<template>
  <view class="content">
    <uni-header :leftIcon="false" :title="'教研活动'"></uni-header>
    <view class="tab">
      <view :class="item.name == activeTab?'tab-list activeTab':'tab-list'"
            @click="tabClick(item)" v-for="item in tabBar">{{item.name}}</view>
    </view>
    <lectureClass v-if="this.type == 'class'"></lectureClass>
    <teaching v-else-if="this.type == 'teaching'"></teaching>
    <research v-else-if="this.type == 'research'"></research>
    <emulate v-else-if="this.type == 'emulate'"></emulate>
  </view>
</template>

<script>
  import lectureClass from "./home/lectureClass/index"
  import teaching from "./home/teaching/index"
  import research from "./home/research/index"
  import emulate from "./home/emulate/index"
  export default {
    data(){
      return{
        activeTab:"听评课",
        type:"class",
        tabBar: [
          {name: '听评课',type:"class"},
          {name: '教案抽查',type:"teaching"},
          {name: '教研管理',type:"research"},
          {name: '观摩课',type:"emulate"}
        ],
      }
    },
    components:{
      lectureClass,teaching,research,emulate
    },
    methods: {
      //标签页切换
      tabClick(data){
        this.activeTab = data.name;
        this.type = data.type;
      },
    }
  }
</script>

<style lang="scss">
  .content{
    .tab{
      display: flex;
      justify-content: space-between;
      background: #fff;
      .activeTab{
        color:#3c96f3;
        border-bottom: 3px solid #3c96f3;
      }
      .tab-list{
        padding: 10px 15px;
      }
    }
  }
</style>
